<template>
  <div class="home home-danger">
    <div class="home-content">
      <a-row :gutter="[10, 10]">
        <a-col :span="12">
          <h-ccard title="当前发生的应急事件" style="height: 390px;position: relative;">
            <!-- <template slot="right">
              <a-button class="btn-red" type="danger" @click="showEventOverModal">
                <SvgIcon iconClass="power" />结束事件
              </a-button>
            </template> -->
            <a-empty size="large" class="a-empty-card" style="position: static !important;transform: translate(0, 0);margin: 0 auto;min-height: 150px" v-if="!urgentMatter.length"></a-empty>
            <div v-else class="urgentMatter-bg scroll">
              <h-list v-if="reloadurgentMatter" type="others" @select="select" :data="urgentMatter" @detail="toDetail($event, 'cz', 4)"></h-list>
            </div>
            <div class="urgent-footer">
              <div class="urgent-btn" v-for="(item, i) in urgentBtn" :key="i" @click="item.action ? toAction(item) : toURL(item.path, item.query)">
                <div>
                  <img :src="item.icon" :style="{width: item.action == 'showRe' ? '24px' : '18px'}" alt="" />
                </div>
                <div>
                  {{ item.title }}
                </div>
              </div>
              <div class="urgent-btn urgent-btn-over" @click="showEventOverModal">
                <div>
                  <img :src="require('@/assets/Image/power.png')" style="width: 25px" alt="" />
                </div>
                <div>
                  结束事件
                </div>
              </div>
              <div class="urgent-btn urgent-btn-cockpit" @click="toURL('/cockpit/index', ['id', 'title'])">
                <div>
                  <img :src="require('@/assets/Image/jsc.png')" style="width: 25px" alt="" />
                </div>
                <div>
                  应急驾驶舱
                </div>
              </div>
              <!-- <div class="cockpit-icon" @click="toURL('/cockpit/index', ['id', 'title'])">
                <div>
                  <img :src="require('@/assets/Image/icon/cockpit-icon.png')" width="100%" alt="" />
                </div>
                <p>应急驾驶舱</p>
              </div> -->
            </div>
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <h-ccard title="重点文章" style="height: 390px">
            <a-empty size="large" class="a-empty-card" v-if="!articleData.length"></a-empty>
            <h-list
              v-else
              type="article"
              articleType="article2"
              :data="articleData"
              :pagination="articlePage"
              @change="changearticle"
              @detail="toLink"
              @addWatch="addWatch"></h-list>
          </h-ccard>
        </a-col>
        <!-- <a-col :span="6">
          <h-ccard title="最新舆情数据" rightType="more" style="height: 390px" @more="toURL('/semNewList')">
            <a-empty size="large" class="a-empty-card" v-if="!ylList.length"></a-empty>
            <h-list
              v-else
              type="default"
              :data="ylList"
              hideFooter
              @detail="toLink($event)"></h-list>
          </h-ccard>
        </a-col> -->
        <a-col :span="6">
          <Action type="danger" :showMB="true" />
        </a-col>
        <a-col :span="6">
          <h-ccard title="热搜数据" style="height: 700px;">
            <template slot="right">
              <div style="margin-top: -4px">
                <a-radio-group
                  class="a-radio-button-blue"
                  size="small"
                  button-style="solid"
                  v-model="source"
                  @change="getHotList(source)">
                  <a-radio-button v-for="item in sourceList" :key="item.value" :value="item.label">{{ item.label }}</a-radio-button>
                </a-radio-group>
              </div>
            </template>

            <a-empty size="large" class="a-empty-card" v-if="!hotData.length"></a-empty>
            <h-list v-else type="hot" :data="hotData" hideRight @detail="toLink"></h-list>
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <h-ccard title="重点账号" style="height: 700px">
            <a-empty size="large" class="a-empty-card" v-if="!importantData.length"></a-empty>
            <h-list
              v-else
              type="important"
              :data="importantData"
              :pagination="importantDataPage"
              @change="changeImportantData"
              @detail="toDetail($event, 'zh')"></h-list>
          </h-ccard>
        </a-col>

        <a-col :span="6">
          <a-row :gutter="[0, 20]">
            <!-- <a-col :span="24">
              <h-ccard title="重点文章" style="height: 440px">
                <a-empty size="large" class="a-empty-card" v-if="!articleData.length"></a-empty>
                <h-list
                  v-else
                  type="article"
                  :data="articleData"
                  :pagination="articlePage"
                  @change="changearticle"
                  @detail="toLink"
                  @addWatch="addWatch"></h-list>
              </h-ccard>
            </a-col> -->
            <a-col :span="24">
              <h-ccard title="评论" style="height: 700px">
                <a-empty size="large" class="a-empty-card" v-if="!commentData.length"></a-empty>
                <h-list v-else type="comment" :pagination="commentPage" @change="commentChange" :data="commentData" ></h-list>
              </h-ccard>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6">
          <h-ccard title="东海前哨数据" style="height: 700px" @more="toURL('/dhData')">
            <template slot="rightMsg">
              <a-icon type="line-chart" />数据管理
            </template>
            <a-empty size="large" class="a-empty-card" v-if="!datasData.length"></a-empty>
            <div class="scroll scroll-dh" v-else style="height: 800px">
              <h-list
                style="margin-top: -20px"
                @change="changeDhdata"
                :pagination="dhPage"
                type="datas"
                :data="datasData"
                @detail="showDhDetail"></h-list>
            </div>
          </h-ccard>
        </a-col>
      </a-row>

    </div>

    <!-- 东海前哨详情 -->
    <createDhDetail v-model="dhDetailShow" :id="dhId" />

    <a-modal v-model="showOverEvent" title="结束事件" @ok="updateEventToEmergencyOver">
      <a-form-model ref="ruleForm" :model="overForm" :rules="overrules">
        <a-form-model-item label="时间" >
          <span>{{ moment().format('YYYY-MM-DD HH:mm:ss') }}</span>
        </a-form-model-item>
        <a-form-model-item label="事件总结" prop="content">
          <!-- <h-tooltip title="接口没这个字段" /> -->
          <a-textarea v-model="overForm.content" :rows="5"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <createReviewBathList :id="overForm.id" v-model="showRe" />

    <createJudge v-model="showJudge" :formData="tempForm" />

    <createLeaderOrder :id="overForm.id" :formData="tempForm" v-model="showcreateLeaderOrder" />

    <Share :id="overForm.id" class="detail" v-model="shareShow" @submit="submitShare">
      <h-ccard size="large" class="detail-ccard" title="事件介绍" shadow>
        <div class="detail-title">
          <div class="detail-tag" v-if="tempForm.eventLevel == 0">
            普通
          </div>
          <div class="detail-tag" v-else-if="tempForm.eventLevel == 1">
            重点
          </div>
          <h1>事件标题：{{ tempForm.title }}</h1>
        </div>
        <div class="detail-tags">
          <span>事件来源：{{ tempForm.source || '无' }}</span>
          <a-divider type="vertical"></a-divider>
          <span>时间：{{ tempForm.createTime }}</span>
          <a-divider type="vertical"></a-divider>
          <span>事件编号：{{ tempForm.code }}</span>
        </div>

        <div class="detail-content" v-html="tempForm.content">

        </div>

        <div class="detail-link">
          文章链接：
          <a v-if="tempForm.link" :href="tempForm.link">{{ tempForm.link }}</a>
          <span v-else>无</span>
        </div>
        <div class="detail-file" v-if="tempForm.enclosure">
          附件：
          <span v-for="(item, i) in fileFormat(tempForm.enclosure)" :key="i">
            <a :href="item.url" target="_blank">
              <SvgIcon v-if="item.type == 'pdf'" iconClass="pdf" />
              <SvgIcon v-else-if="item.type.includes('doc')" iconClass="word" />
              <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(item.type)" iconClass="image" />
              <SvgIcon v-else iconClass="file" />
            </a>
          </span>
        </div>
      </h-ccard>
    </Share>
  </div>
</template>
<script>
import { getEventEmergencyList, yqList, addarchiveEvent, safeIntnet, getHotSearchEvent, getStressNumberEvent, getStressArticleEventt, updateEventToEmergency, dhHomeList, dhTopList, getStressCommentsEvent, addArticleWatch } from '@/api/serve';
import SvgIcon from '../../components/SvgIcon.vue';
import Action from './action/Index';
import moment from 'moment';
import createDhDetail from './action/createDhDetail';
import createReviewBathList from './action/createReviewBathList';
import createJudge from './action/createJudge';
import createLeaderOrder from '../detail/createLeaderOrder';
import Share from '../detail/modules/Share';
import { mapState } from 'vuex';

export default {
    data() {
      return {
        moment,
        showOverEvent: false,
        showJudge: false,
        showRe: false,
        overForm: {
          eventProc: 3,
          id: ''
        },
        shareShow: false,
        showcreateLeaderOrder: false,
        tempForm: {},
        overrules: {
          content: [{ required: true, message: '请输入' }]
        },
          source: '抖音',
          sourceList: [
              {
                  label: '抖音',
                  value: 1
              },
              {
                  label: '微博',
                  value: 2
              },
              {
                  label: '头条',
                  value: 3
              },
              {
                  label: '百度',
                  value: 4
              },
              {
                  label: '知乎',
                  value: 5
              }
          ],
          importantDataPage: {
            pageNo: 1,
            pageSize: 9,
            total: 0
          },
          articlePage: {
            pageNo: 1,
            pageSize: 5,
            total: 0
          },
          commentPage: {
            pageNo: 1,
            pageSize: 10,
            total: 0
          },
          dhPage: {
            pageNo: 1,
            pageSize: 9,
            total: 0
          },
          urgentBtn: [
            // {
            //   title: '事件研判',
            //   icon: require('@/assets/Image/icon/chuizi.png'),
            //   action: 'showJudge'
            // },
            {
              title: '发起指令',
              icon: require('@/assets/Image/icon/light.png'),
              action: 'showcreateLeaderOrder'
            },
            // {
            //   title: '数据审核',
            //   icon: require('@/assets/Image/icon/gz.png'),
            //   path: '/verifyData',
            //   query: 'id'
            // },
            {
              title: '预览/推送上屏',
              icon: require('@/assets/Image/eyes.png'),
              action: 'showRe'
            },
            {
              title: '即时报告',
              icon: require('@/assets/Image/icon/chart-icon.png'),
              path: '/detail',
              query: 'id'
            }
            // {
            //   title: '存档推送',
            //   icon: require('@/assets/Image/icon/save-icon.png'),
            //   action: 'addarchiveEvent'
            // }
          ],
          urgentMatter: [],
          reloadurgentMatter: true,
          eventNumList: [
              {
                  title: '代办事件',
                  num: 48,
                  unit: '件',
                  icon: require('@/assets/Image/icon/event-icon-1.png')
              },
              {
                  title: '需处置事件',
                  num: 48,
                  unit: '件',
                  icon: require('@/assets/Image/icon/event-icon-2.png')
              },
              {
                  title: '处置响应时间',
                  num: 2,
                  unit: '小时',
                  icon: require('@/assets/Image/icon/event-icon-3.png')
              }
          ],
          ylList: [],

          singleData: [],
          hotData: [],
          importantData: [],
          articleData: [],
          datasData: [],
          commentData: [],
          safeDetailShow: false,
          dhDetailShow: false,
          safeId: '',
          dhId: ''
      };
    },
    created() {
      // 当前发生的应急事件
      this.geturgentMatter();
      // 最新舆情事件
      this.getYqList();
      // 网络安全通报
      this.getSafeIntnet();
      // 重点账号
      this.getImpAccount();
      // 重点文章
      this.getImpArticle();
      // 东海前哨数据
      this.getDhData();
    },

    computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },

    methods: {
      toDetail(item, key, type) {
        this.$router.push({ path: '/detail', query: { id: item.id, typeId: item.typeId, key, type } });
      },
      // 当前发生的应急事件
      geturgentMatter() {
        getEventEmergencyList().then(res => {
            this.urgentMatter = res.data.map((e, i) => {
              return {
                ...e,
                no: e.code,
                tip: e.eventLevel == 1 ? '重点' : '普通',
                type: e.eventLevel == 1 ? 'danger' : 'primary',
                time: e.createTime,
                desc: e.describe,
                keepTime: e.totalTime || 0,
                order: i + 1,
                createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`
                // sendNum: e.askNum || 0
              };
            });
            this.overForm.id = (this.urgentMatter && this.urgentMatter[0] && this.urgentMatter[0].id) || '';
            this.overForm.title = (this.urgentMatter && this.urgentMatter[0] && this.urgentMatter[0].title) || '';
            this.tempForm = (this.urgentMatter && this.urgentMatter[0]) || {};

            // 平台热搜榜
            this.getHotList();
            // 重点账号
            this.getImpAccount();
            // 重点文章
            this.getImpArticle();
            // 评论
            this.getComment();
        });
      },
      // 最新舆情事件
      getYqList() {
        yqList({
          pageNo: 1,
          pageSize: 11
        }).then(res => {
          this.ylList = res.data.records.map(e => {
            return {
              ...e,
              createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`
            };
          });
        });
      },
      // 网络安全通报
      getSafeIntnet() {
        const color = ['success', 'primary', 'danger'];
        const typeName = ['市级', '省级', '中央'];
        safeIntnet({
          pageNo: 1,
          pageSize: 16
        }).then(res => {
          this.singleData = res.data.records.map(e => {
            return {
              ...e,
              simpleTagName: typeName[e.type],
              simpleTagColor: color[e.type],
              createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`

            };
          });
        });
      },
      showDhDetail({ id }) {
        this.dhDetailShow = true;
        this.dhId = id;
      },
      // 平台热搜榜
      getHotList(source = '抖音') {
        getHotSearchEvent({
          eventId: this.overForm.id,
          source,
          level: 1,
          pageNo: 1,
          pageSize: 10
        }).then(res => {
          this.hotData = res.data.records.map((e, i) => {
            return {
              ...e,
              source: `数据来源：${e.source}`,
              createTime: `获取时间：${moment(e.createTime).format('MM/DD HH:mm')}`,
              order: i + 1,
              hotNum: e.hotNumber
            };
          });
        });
      },
      // 重点账号
      getImpAccount(page) {
        getStressNumberEvent({
          eventId: this.overForm.id,
          pageNo: page || 1,
          pageSize: 9
        }).then(res => {
          this.importantData = res.data.records.map((e, i) => {
            return {
              ...e,
              account: e.name,
              order: i + (((page || 1) - 1) * 9) + 1,
              // order: i + 1,
              tag: e.label,
              // createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`
              createTime: e.likeTime ? `${moment(e.likeTime).format('MM/DD HH:mm')}` : ''
            };
          });
          this.importantDataPage.total = res.data.total;
        });
      },
      changeImportantData(page) {
        console.log(page);
        this.getImpAccount(page);
      },
      changearticle(page) {
        this.getImpArticle(page);
      },
      commentChange(page) {
        this.getComment(page);
      },
      // 重点文章
      getImpArticle(page) {
        getStressArticleEventt({
          eventId: this.overForm.id,
          pageNo: page || 1,
          pageSize: 5,
          isDelete: 0
        }).then(res => {
          this.articleData = res.data.records.map(e => {
            return {
              ...e,
              createTime: moment().format('MM/DD HH:mm')
            };
          });
          this.articlePage.total = res.data.total;
        });
      },
      changeDhdata(page) {
        this.getDhData(page);
      },
      // 东海前哨数据
      // 东海前哨数据
      async getDhData(page) {
        const res = await dhTopList();
        res.data.order = 1;
        const data = [res.data].map(e => {
          return {
            ...e,
            address: e.territory,
            createTime: `${moment(e.reaseTime).format('MM/DD HH:mm')}`
          };
        });
        dhHomeList({
          pageNo: page || 1,
          pageSize: 8
        }).then(res => {
          this.dhPage.total = res.data.total;
          this.datasData = data.concat(
            res.data.records.map(e => {
              return {
                ...e,
                address: e.territory,
                createTime: `${moment(e.reaseTime).format('MM/DD HH:mm')}`
              };
            })
          );
        });
      },
      getComment(page) {
        getStressCommentsEvent({
          eventId: this.overForm.id,
          pageNo: page || 1,
          pageSize: 10
        }).then(res => {
          this.commentData = res.data.records.map(e => {
            return {
              ...e,
              createTime: e.evalTime,
              title: e.userName,
              desc: e.content || '无'
            };
          });
          this.commentPage.total = res.data.total;
        });
      },
      toURL(path, queryKey) {
        console.log(path);
        if (path) {
          if (path == '/detail') {
            const routeUrl = this.$router.resolve({
              path: '/detail',
              query: { id: this.overForm.id, type: 'history', autoShare: true }
            });
            window.open(routeUrl.href, '_blank');
          } else if (queryKey) {
            if (queryKey instanceof Array) {
              const obj = {};
              queryKey.forEach(e => {
                obj[e] = this.overForm[e];
              });
              console.log(obj);
              this.$router.push({ path, query: obj });
            } else {
              this.$router.push({ path, query: { [queryKey]: this.overForm.id } });
            }
          } else {
            this.$router.push({ path });
          }
        }
      },
      toAction({ action }) {
        if (action == 'addarchiveEvent') {
          this.addarchiveEvent();
        } else {
          const that = this;
          that[action] = true;
          console.log(action);
        }
      },
      addarchiveEvent() {
        const that = this;
        this.$confirm({
          title: that.overForm.title,
          content: '是否存档并推送该事件?',
          onOk() {
            addarchiveEvent({
              eventIdList: [that.overForm.id]
            }).then(res => {
              that.$message.success('存档推送成功');
              that.geturgentMatter();
              that.reloadurgentMatter = false;
              that.$nextTick(() => {
                that.reloadurgentMatter = true;
              });
            });
          }
        });
      },
      toDetailYq(item, key) {
        this.$router.push({ path: '/yqDetail', query: { id: item.id, typeId: item.typeId, key } });
      },
      toLink({ link }) {
        window.open(link);
      },
      // 添加文章监控
      addWatch({ id }) {
        addArticleWatch({ articId: id }).then(res => {
          this.$message.success('添加监控成功');
        });
      },
      showEventOverModal() {
        if (!this.overForm.id) {
          this.$message.error('缺少事件');
          return;
        }
        this.showOverEvent = true;
      },
      select(e) {
        console.log(e);
        this.overForm.id = e.id;
        this.overForm.title = e.title;
        this.tempForm = e;
        this.getHotList();
        this.getImpAccount();
        this.getImpArticle();
        this.getComment();
      },
      submitShare() {
        // addEventShare({ eventId: this.overForm.id }).then(res => {
        //   this.$message.success('分享成功');
        //   this.shareShow = false;
        //   const h = this.$createElement;
        //   if (res.url) {
        //     queryLinkStatus({
        //       url: res.url
        //     }).then(res => {
        //       // this.$message.success(res.msg);
        //       this.$info({
        //       title: '分享链接',
        //       content: h('div', {}, [
        //           h('a', {
        //             attrs: {
        //               target: '_blank',
        //               href: res.data
        //             }
        //           }, res.data)
        //         ])
        //       });
        //       // this.$router.push({ path: '/handleEvent/watch' });
        //     });
        //   }
        // });
      },
      updateEventToEmergencyOver() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const that = this;
            this.$confirm({
              title: '温馨提示',
              content: '是否结束事件？',
              onOk() {
                updateEventToEmergency({
                  eventProc: 3,
                  id: that.overForm.id,
                  summary: that.overForm.content
                }).then(res => {
                  that.$message.success('结束事件成功');
                  that.showOverEvent = false;
                  that.geturgentMatter();
                });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    components: { SvgIcon, Action, createDhDetail, createReviewBathList, createJudge, createLeaderOrder, Share }
};
</script>
<style lang="less" scoped>
.home-danger {
  // background: rgb(255,245,238);
}
  .home-nav {
    margin-left: -10px;
  }
  .home-content {
    margin-top: 12px;
    margin-left: -10px;
    .urgent-footer {
      overflow: hidden;
      display: flex;
      // margin-left: 20px;
      // margin-top: 9px;
      // position: absolute;
      align-items: center;
      height: 60px;
      // bottom: 20px;
      margin-top: 20px;
      width: 100%;
      border-radius: 100px;
      background: #E8F1D6;
    }
    .urgent-btn {
      // padding: 9px 0px;
      width: 14.1%;
      height: 60px;
      box-sizing: border-box;
      // background: rgba(31, 59, 138, 0.1);
      // border-radius: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #1F3B8A;
      display: flex;
      flex-wrap: wrap;
      // align-items: center;
      justify-content: center;
      cursor: pointer;
      text-align: center;
      transition: all 0.3s;
      margin-top: 0px;
      // margin-left: 16px;
      border-left: 1px solid #fff;
      flex-shrink: 0;
      &.urgent-btn-over {
        background: #E20C0C;
        color: #fff;
        width: 100%;
        flex-shrink: 1;
      }
      &:last-child {
        width: 100%;
        flex-shrink: 1;
      }
      &.urgent-btn-cockpit {
        background: #1F3B8A;
        color: #fff;
      }
      >div {
        width: 100%;
        &:first-child {
          margin-bottom: 0px;
          margin-top: 6px;
        }
      }
      &:hover {
        opacity: 0.8;
      }
      &:not(:first-child) {

      }
      img {
        width: 18px;
        // display: block;
        // margin-right: 8px;
      }
    }
    .cockpit-icon {
      width: 88px;
      height: 84px;
      background: #1F3B8A;
      border-radius: 10px;
      position: absolute;
      right: 0;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      cursor: pointer;
      > div {
        width: 39px;
        margin: 0 auto;
      }
      p {
        font-size: 13px;
        font-weight: 400;
        color: #FFFFFF;
        margin: 0 auto;
        margin-top: -13px;
      }
    }
    .toolList-card {
      padding-top: 18px;
      padding-bottom: 18px;

    }
  }
  .urgentMatter-bg {
    height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 12px;
  }
  .event-card {
    height: 77px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px 32px;
    .event-card-cnt {
      display: flex;
      .event-card--img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        flex-shrink: 0;
        border-radius: 100%;
        text-align: center;
        vertical-align: middle;
        img {
          margin-top: 10px;
        }
      }
      &.event-card-cnt-1 {
        color: #00B7EE;
        .event-card--img {
          background: #00B7EE;
        }
      }
      &.event-card-cnt-2 {
        color: #3573FC;
        .event-card--img {
          background: #3573FC;
        }
      }
      &.event-card-cnt-3 {
        color: #FC6935;
        .event-card--img {
          background: #FC6935;
        }
      }

      .event-card--text {
        margin-left: 7px;
        p {
          margin: 0;
          font-size: 13px;
        }
        >p:first-child {
          color: #333;
        }
        >P:last-child {
          text-align: center;
          margin-top: -4px;
          span {
            font-size: 20px;
          }
        }
      }
    }
  }
  .btn-red {
    .svg-icon {
      font-size: 18px;
      transform: translate(0, 1px);
      margin-right: 4px;
    }
  }

  .scroll-dh {
    padding: 0 12px;
  }
</style>
